import React from 'react';
import GuideCard from 'components/guideCard';
import { getIntroPointState, setIntroPointState } from 'api';
import { ENUM } from 'utils/constants.js';
import PropTypes from 'prop-types';
import exceed from 'utils/apimap';
import './index.scss';
// import intl from '../../../../../../locale';

const introKey = 'first_enter';
const introType = {
  first_enter_key: 'org_alias_guide',
  first_enter_organization: true,
};

const { user_role, id: orgId } = window.FORCE.organization;
const isOrgAdmin = ENUM.access_level_id[user_role] >= 60;

const prefix = 'org-alias_guide';
export default class OrgAliasGuide extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: false,
    };
  }

  static propTypes = {
    beforeShow: PropTypes.func,
    afterClose: PropTypes.func,
    newbieTaskStatus: PropTypes.string,
    welcomeDialogStatus: PropTypes.bool,
    newbieTaskExpandStatus: PropTypes.bool,
    style: PropTypes.object,
  };

  static defaultProps = {
    beforeShow: () => {},
    afterClose: () => {},
    newbieTaskStatus: null,
    welcomeDialogStatus: true,
    newbieTaskExpandStatus: true,
    style: {},
  };

  UNSAFE_componentWillReceiveProps({
    newbieTaskStatus,
    welcomeDialogStatus,
    newbieTaskExpandStatus,
  }) {
    if (!welcomeDialogStatus) {
      const newbieTaskCloseOrFinish =
        newbieTaskStatus === 'close' || newbieTaskStatus === 'finish' || newbieTaskStatus === 'old';
      if (newbieTaskCloseOrFinish && newbieTaskStatus !== this.props.newbieTaskStatus) {
        this.getIfShow();
      } else if (
        newbieTaskExpandStatus !== this.props.newbieTaskExpandStatus &&
        !newbieTaskExpandStatus
      ) {
        if (!this.state.visible) {
          this.getIfShow();
        }
      }
    }
  }

  getIfShow = () => {
    getIntroPointState(introKey, introType)
      .then((result) => {
        if (result.state && isOrgAdmin) {
          exceed
            .fetch({
              api: 'organization.admin_setting',
              params: {
                orgId,
              },
            })
            .then((res) => {
              if (res.auto_sync_member_enable) {
                this.props.beforeShow(() => {
                  this.setState({
                    visible: true,
                  });
                });
              }
            });
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };

  setNotShow = () => {
    this.setState({
      visible: false,
    });

    this.props.afterClose();
    setIntroPointState(introKey, introType)
      .then(() => {})
      .catch((err) => {
        console.error(err);
      });
  };

  render() {
    const { visible } = this.state;
    const { style } = this.props;

    // return (
    //   <GuideCard
    //     style={style}
    //     className={'org-risk-update-guide'}
    //     visible={visible}
    //     onClickKnown={() => { this.setNotShow(); }}
    //     header="安全中心全新升级"
    //     description="安全预防 | 风险检测 | 主动防御"
    //     imgPosition="top"
    //     arrow="left"
    //     img="https://img.alicdn.com/imgextra/i1/O1CN01c5q6MJ1nEbxBFuKae_!!6000000005058-2-tps-336-228.png"
    //   />
    // );

    return (
      <GuideCard
        className={prefix}
        style={style}
        visible={visible}
        onClickKnown={() => {
          this.setNotShow();
        }}
        header={
          '设置企业管理员'
          // intl.get({
          //   id: 'code-assets.containers.orgAliasGuide.SetPersonalizedEnterpriseIdentificationName',
          //   defaultMessage: '设置企业个性化标识名',
          // })
        }
        description={
          '云效企业管理员默认为 Codeup 企业管理员，如需修改请前往「管理员设置」调整 '
          // intl.get({
          //   id: 'code-assets.containers.orgAliasGuide.YouCanEasilyAccessThe',
          //   defaultMessage: '设置后可便捷访问代码库',
          // })
        }
        arrow="left"
        // img="https://img.alicdn.com/tfs/TB15VnOIeH2gK0jSZFEXXcqMpXa-406-132.png"
      />
    );
  }
}
